<template>
  <div>
    <!-- 引入第一部分-->
    <el-row class="navbar">
      <el-col :span="1" :offset="7" class="nb">男表</el-col>
      <el-col :span="1" class="nb">女表</el-col>
      <el-col :span="1" class="nb">品牌馆</el-col>
      <el-col :span="1" class="nb">秒杀</el-col>
      <el-col :span="1" class="nb">极速选表</el-col>
      <el-col :span="2" class="nb">体验中心</el-col>
      <el-col :span="1" class="nb">名匠维修</el-col>
      <el-col :span="2" class="nb">认证二手表</el-col>
      <el-col :span="1" class="nb">奢品共享</el-col>
      <el-col :span="2" class="nb">手表资讯</el-col>
      <!-- 客服开始-->
       <div class="service">
    <template>
  <el-popover
   placement="left"
    width="200"
    trigger="hover">
    <div class="service1" style="width: 300px; height: 100px;">
      <div class="service1_a" style="font-size: 20px;color: #CCAA7A;margin-top: 30px;">11.11全球名表狂欢节</div>
      <span style="color: #666666;font-size: 12px; margin-left: 28px;">3.5折起 咨询购表送好礼</span>
      <div>
          <img style="margin-top: 20px; width: 210px; height: 20px;" src="../assets/img/横线.png" />
      </div>
      <div>
        <div style="float: left; color: #CC3D3D; margin-left: 10px; font-size: 12px; cursor: pointer;">选表咨询</div>
        <div style="float: left; font-size: 12px; margin-left: 70px; cursor: pointer;">手表维修</div>
      </div>
    </div>
    <div slot="reference"> <img src="../assets/img/客服.jpg" /></div>
  </el-popover>
 </template>
    </div>
    <!-- 客服结束-->

    </el-row>
    <div class="block2">
      <el-carousel height="460px" :interval="5000" arrow="always">
        <el-carousel-item v-for="item in lantern" :key="item">
          <img class="imglt" :src="item" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="leftbar">
      <ul>
        <li class="l1">
          <span>全部商品</span>
          <img src="../assets/img/全部商品.png" />
        </li>
        <li class="a b">
          <span class="s1">顶级品牌</span>
          <span class="s2">/江诗丹顿 宝玑 积家</span>
        </li>
        <li class="a b">
          <span class="s1">奢华品牌</span>
          <span class="s2">/劳力士 欧米茄 万国</span>
        </li>
        <li class="a b">
          <span class="s1">高级品牌</span>
          <span class="s2">/浪琴 爱宝时 帝陀</span>
        </li>
        <li class="a b">
          <span class="s1">轻奢品牌</span>
          <span class="s2">/天梭 赫柏林 美度</span>
        </li>
        <li class="a b">
          <span class="s1">年轻潮牌</span>
          <span class="s2">/卡西欧 迪士尼 漫</span>
        </li>
        <li class="a b">
          <span class="s1">国产智能</span>
          <span class="s2">/飞亚达 海鸥 上海</span>
        </li>
        <li class="a b">
          <span class="s1">表带</span>
          <span class="s2">/积优 奇美拉 欧时浩</span>
        </li>
        <li class="b">
          <span class="s1">维修保养</span>
          <span class="s2">/配件更换</span>
        </li>
      </ul>
    </div>
    <!-- 结束-->
    <el-row class="F4" type="flex" justify="center">
      <el-col :span="4" v-for="item in F4" class="F4_spacing">
        <img :src="item" />
      </el-col>
    </el-row>
    <el-row class="limited_time" type="flex" justify="center">
      <el-col :span="2" class="lsg">限时购</el-col>
      <el-col :span="5" class="djs" id='span_dt_dt'></el-col>
      <el-col :span="1" :offset="11" class="ck">查看更多></el-col>
    </el-row>
    <el-row class="limited_goods" type="flex" justify="center">
      <el-col class="goods_img" :span="4">
        <img src="../assets/img/limited_big.jpg" />
      </el-col>
      <el-col :span="8" class="F3">
        <div class="block">
          <el-carousel height="280px">
            <el-carousel-item v-for="item in limited" :key="item">
              <img :src="item" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
      <el-col class="F_h4" :span="4">
        <div class="block">
          <el-carousel height="280px">
            <el-carousel-item class="F_h4_F4_spacing" v-for="item in limited_h" :key="item">
              <img :src="item" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>

    <el-row class="month" type="flex" justify="start">
      <el-col :span="2" class="month_text">本月爆款</el-col>
      <el-col :span="2" class="month_img">
        <img src="../assets/img/臻选热销.png" />
      </el-col>
    </el-row>
    <el-row class="explosive_money" type="flex" justify="center">
      <el-col :span="6" class="explosive1">
        <img src="../assets/img/explosive1.jpg" />
      </el-col>
      <el-col :span="6" class="explosive2">
        <img class="explosive_img1" src="../assets/img/explosive2.jpg" />
        <img class="explosive_img11" src="../assets/img/explosive3.jpg" />
      </el-col>
      <el-col class="explosive3" :span="6">
        <img class="explosive_img2" src="../assets/img/explosive4.jpg" />
        <img class="explosive_img22" src="../assets/img/explosive5.jpg" />
      </el-col>
    </el-row>
    <el-row class="secondhand" type="flex" justify="center">
      <el-col :span="2" class="secondhand_text">二手拍卖</el-col>
      <el-col :span="1" :offset="16" class="secondhand_much">查看更多></el-col>
    </el-row>
    <el-row class="secondhand_goods" type="flex" justify="center">
      <el-col class="goods_img" :span="6">
        <img src="../assets/img/secondhand1.jpg" />
      </el-col>
      <el-col class="goods_lantern" :span="12">
        <div class="block">
          <el-carousel height="280px">
            <el-carousel-item v-for="item in secondhand" :key="item">
              <img :src="item" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>

    <!-- 同样的复用month 时尚腕表-->
    <el-row class="month" type="flex" justify="start">
      <el-col :span="2" class="month_text">时尚腕表</el-col>
      <el-col :span="2" class="month_img">
        <img src="../assets/img/明星同款.png" />
      </el-col>
    </el-row>
    <el-row class="explosive_money" type="flex" justify="center">
      <el-col :span="6" class="explosive1">
        <img src="../assets/img/fashion1.jpg" />
      </el-col>
      <el-col :span="6" class="explosive2">
        <img class="explosive_img1" src="../assets/img/fashion2.jpg" />
        <img class="explosive_img11" src="../assets/img/fashion3.jpg" />
      </el-col>
      <el-col class="explosive3" :span="6">
        <img class="explosive_img2" src="../assets/img/fashion4.jpg" />
        <img class="explosive_img22" src="../assets/img/fashion5.jpg" />
      </el-col>
    </el-row>
    <!-- 结束-->
    <!-- 同样的复用month 运动智能表-->
    <el-row class="month" type="flex" justify="start">
      <el-col :span="2" class="month_text">运动，智能</el-col>
      <el-col :span="2" class="month_img">
        <img src="../assets/img/coupon.png" />
      </el-col>
    </el-row>
    <el-row class="explosive_money" type="flex" justify="center">
      <el-col :span="6" class="explosive1">
        <img src="../assets/img/coupon1.jpg" />
      </el-col>
      <el-col :span="6" class="explosive2">
        <img class="explosive_img1" src="../assets/img/coupon2.jpg" />
        <img class="explosive_img11" src="../assets/img/coupon3.jpg" />
      </el-col>
      <el-col class="explosive3" :span="6">
        <img class="explosive_img2" src="../assets/img/coupon4.jpg" />
        <img class="explosive_img22" src="../assets/img/coupon5.jpg" />
      </el-col>
    </el-row>
    <!-- 结束-->
    <div class="ranking">
      <div class="rank f1">排行榜</div>
      <!-- <div class="nickname f1 a" @click="change(0)">男表</div>
      <div class="nickname f1 b" @click="change(1)">女表</div>
      <div class="nickname f1 c" @click="change(2)">潮牌</div> -->
      <ul>
        <li v-for="(item,index) in change_ranking">
        <a @click="change(index)" :style="[{color:item.changecolor},{backgroundColor:item.changebc}]">
        {{item.name}}
        </a>
        </li>
      </ul>
      <div class="see f1">查看更多></div>
      <div class="clean"></div>
    </div>
    <el-row class="ranking_goods" type="flex" justify="center" v-for="item in change_ranking" v-if="item.flag">
      <el-col :span="6" class="goods_a">
        <img :src="item.img_a" />
      </el-col>
      <el-col :span="6" class="goods_b">
        <img :src="item.img_b" />
      </el-col>
      <el-col :span="3" class="goods_c">
        <img :src="item.img_c1" />
        <img :src="item.img_c2" />
      </el-col>
      <el-col :span="3" class="goods_d">
        <img :src="item.img_d1" />
        <img :src="item.img_d2" />
      </el-col>
    </el-row>
    <!-- 同样的复用了ranking-->
    <div class="ranking">
      <div class="rank f1">品牌馆</div>
      <ul>
        <li v-for="(item,index) in brand">
        <a @click="change_brand(index)" :style="[{color:item.changecolor},{backgroundColor:item.changebc}]">
        {{item.name}}
        </a>
        </li>
      </ul>
      <div class="see f1">查看更多></div>
      <div class="clean"></div>
    </div>
    <!-- 复用ranking结束-->
    <el-row class="brand" type="flex" justify="center" v-for="item in brand" v-if="item.flag">
      <el-col :span="9" class="brand_one">
        <img :src="item.img_a" />
        <img :src="item.img_b" />
      </el-col>
      <el-col :span="9">
        <img :src="item.img_c" />
        <img :src="item.img_d" />
      </el-col>
    </el-row>
    <el-row class="f6" type="flex" justify="center">
      <el-col class="f6_goods" :span="3" v-for="item in f6">
        <img :src="item" />
      </el-col>
    </el-row>

    <el-row class="watch_consultation" type="flex" justify="center">
      <el-col :span="2" class="consultation_text">腕表咨询</el-col>
      <el-col :span="1" :offset="16" class="consultation_much">查看更多></el-col>
  </el-row>
    <el-row class="consultation_goods" type="flex" justify="center">
      <el-col class="goods_list1" :span="6">
        <img src="../assets/img/consultation1.jpg" />
      </el-col >
      <el-col class="goods_list2" :span="3" v-for="item in consultation_goods">
        <img :src="item" />
      </el-col>
    </el-row>

     <el-row class="open_sharing" type="flex" justify="start">
      <el-col :span="2" class="sharing_text" :offset="3">开放共享</el-col>
     </el-row>
    <el-row class="sharing_goods" type="flex" justify="center">
        <el-col class="goods_list" :span="4" v-for="item in sharing_goods">
             <img class="list_img" :src="item" />
        </el-col>
     </el-row>
     <!-- 复用goods-->
      <el-row class="open_sharing" type="flex" justify="start">
       <el-col :span="2" class="sharing_text" :offset="3">实拍空</el-col>
      </el-row>
     <el-row class="sharing_goods" type="flex" justify="center">
         <el-col class="goods_list" :span="4" v-for="item in shooting">
              <img class="list_img" :src="item" />
         </el-col>
      </el-row>
       <!-- 复用goods-->
       <el-row class="open_sharing" type="flex" justify="start">
        <el-col :span="2" class="sharing_text" :offset="3">猜你喜欢</el-col>
       </el-row>
      <el-row class="like" type="flex" justify="center" v-for="i in 5">
          <el-col class="goods_list" :span="4"  v-for="(item,index) in like">
               <img class="list_img" :src="item" />
          </el-col>
       </el-row>
       <el-row class="lb"></el-row>
  </div>
</template>

<script>

  import 'element-ui/lib/theme-chalk/display.css';
  export default {
    name: "wbwBody",
    data() {
      return {
        F4: [require("../assets/img/f4_1.jpg"), require("../assets/img/f4_2.jpg"), require("../assets/img/f4_3.jpg"),
          require("../assets/img/f4_4.jpg")
        ],
        limited: [require("../assets/img/limited_td3.png"), require("../assets/img/limited_td2.png"), require(
          "../assets/img/limited_td1.png")],
        limited_h: [require("../assets/img/limited_h1.jpg"), require("../assets/img/limited_h2.jpg"), require(
          "../assets/img/limited_h3.jpg"), require("../assets/img/limited_h4.jpg")],
        lantern: [require("../assets/img/lantern4.jpg"), require("../assets/img/lantern3.jpg"), require(
          "../assets/img/lantern2.jpg"), require("../assets/img/lantern1.jpg")],
        secondhand: [require("../assets/img/secondhand2.png"), require("../assets/img/secondhand3.png")],
        change_ranking:[{
          changebc:"#000000",
          changecolor:'rgb(204,170,122)',
          name:"男表",
          flag: true,
          img_a:require("../assets/img/rankn1.jpg"),
         img_b:require("../assets/img/rankn2.png"),
          img_c1:require("../assets/img/rankn3.png"),
          img_c2:require("../assets/img/rankn4.png"),
          img_d1:require("../assets/img/rankn5.png"),
          img_d2:require("../assets/img/rankn6.png"),
        },
        {
          changebc:"",
           changecolor:'',
           name:"女表",
          flag: false,
          img_a:require("../assets/img/rankw1.jpg"),
          img_b:require("../assets/img/rankw2.png"),
           img_c1:require("../assets/img/rankw3.png"),
          img_c2:require("../assets/img/rankw4.png"),
          img_d1:require("../assets/img/rankw5.png"),
          img_d2:require("../assets/img/rankw6.png"),
        },
        {
           changebc:"",
           changecolor:'',
          name:"潮表",
          flag: false,
          img_a:require("../assets/img/rankc6.jpg"),
          img_b:require("../assets/img/rankc1.png"),
           img_c1:require("../assets/img/rankc2.png"),
          img_c2:require("../assets/img/rankc3.png"),
          img_d1:require("../assets/img/rankc4.png"),
          img_d2:require("../assets/img/rankc5.png"),
        }],
        brand:[
          {
             changebc:"#000000",
            changecolor:'rgb(204,170,122)',
            flag:true,
            name:"高级",
            img_a:require("../assets/img/senior1.jpg"),
            img_b:require("../assets/img/senior2.jpg"),
            img_c:require("../assets/img/senior3.jpg"),
            img_d:require("../assets/img/senior4.jpg"),
          },
          {
            changebc:"",
            changecolor:'',
            false:false,
            name:"顶级",
             img_a:require("../assets/img/top1.jpg"),
            img_b:require("../assets/img/top2.jpg"),
            img_c:require("../assets/img/top3.jpg"),
            img_d:require("../assets/img/top4.jpg"),
          },
          {
           changebc:"",
           changecolor:'',
            false:false,
            name:"奢华",
             img_a:require("../assets/img/luxurious1.jpg"),
            img_b:require("../assets/img/luxurious2.jpg"),
            img_c:require("../assets/img/luxurious3.jpg"),
            img_d:require("../assets/img/luxurious4.jpg"),
          },
          {
            changebc:"",
            changecolor:'',
            false:false,
            name:"轻奢",
            img_a:require("../assets/img/extravagance1.jpg"),
            img_b:require("../assets/img/extravagance2.jpg"),
            img_c:require("../assets/img/extravagance3.jpg"),
            img_d:require("../assets/img/extravagance4.jpg"),
          },
          {
           changebc:"",
           changecolor:'',
            false:false,
            name:"时尚",
             img_a:require("../assets/img/vogue1.jpg"),
            img_b:require("../assets/img/vogue2.jpg"),
            img_c:require("../assets/img/vogue3.jpg"),
            img_d:require("../assets/img/vogue4.jpg"),
          }
        ],
      f6: [
         require("../assets/img/f6_1.png"),
         require("../assets/img/f6_2.png"),
         require("../assets/img/f6_3.png"),
         require("../assets/img/f6_4.png"),
         require("../assets/img/f6_5.png"),
         require("../assets/img/f6_6.png"),
         ],
         consultation_goods: [
            require("../assets/img/consultation2.png"),
            require("../assets/img/consultation3.png"),
            require("../assets/img/consultation4.png"),
            require("../assets/img/consultation5.png")
            ],
         sharing_goods: [
               require("../assets/img/sharing1.jpg"),
               require("../assets/img/sharing2.png"),
               require("../assets/img/sharing3.jpg"),
               require("../assets/img/sharing4.jpg")
            ],
           shooting: [
                 require("../assets/img/shooting1.jpg"),
                 require("../assets/img/shooting2.jpg"),
                 require("../assets/img/shooting3.jpg"),
                 require("../assets/img/shooting4.jpg")
              ],
              like: [
                    require("../assets/img/like1.png"),
                    require("../assets/img/like2.png"),
                    require("../assets/img/like3.png"),
                    require("../assets/img/like4.png")
                 ]
      }
    },
    components: {

    },
   mounted() {
      function show_date_time() {
        window.setTimeout( function(){show_date_time()}, 1000);
      	var BirthDay = new Date("11/19/2019 08:00:00"); //这个日期是可以修改的
      	var today = new Date();
      	var timeold = (BirthDay.getTime() - today.getTime());
      	var sectimeold = timeold / 1000
      	var secondsold = Math.floor(sectimeold);
      	var msPerDay = 24 * 60 * 60 * 1000
      	var e_daysold = timeold / msPerDay
      	var daysold = Math.floor(e_daysold);
      	var e_hrsold = (e_daysold - daysold) * 24;
      	var hrsold = Math.floor(e_hrsold);
      	var e_minsold = (e_hrsold - hrsold) * 60;
      	var minsold = Math.floor((e_hrsold - hrsold) * 60);
      	var seconds = Math.floor((e_minsold - minsold) * 60);
      	span_dt_dt.innerHTML = "<align=center><p><font color=#CC5252><p><font-size=20>" + daysold + "天" + hrsold + "小时" +
      		minsold + "分" + seconds + "秒" + "<br></font><br></font>"; // 这里你自己改。就是倒计时的样式，字体大小size=4 颜色是color
      }

     show_date_time();

   },
    methods: {
      change(index){
        this.change_ranking.forEach((obj, index1) => {
        	 if (index1 == index) {
        		obj.flag = true;
            obj.changecolor='rgb(204,170,122)';
            obj.changebc="#000000";
        	} else {
        		obj.flag = false;
            obj.changecolor='';
             obj.changebc="";
        	}
        });
      },
      change_brand(index){
        this.brand.forEach((obj, index1) => {
        	 if (index1 == index) {
        		obj.flag = true;
            obj.changecolor='rgb(204,170,122)';
            obj.changebc="#000000";
        	} else {
        		obj.flag = false;
            obj.changecolor='';
             obj.changebc="";
        	}
        });
      }
    },
  }
</script>


<style scoped="scoped">
  @import url("../assets/css/wbwBody.css")
</style>
